<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="ID" prop="_id" width='250'></el-table-column>
		  <el-table-column label="用户名" prop="userName" width='200'></el-table-column>
		  <el-table-column label="昵称" prop="nickName" width='100'></el-table-column>
		  <el-table-column label="密码" prop="password" width='220'>
			  <template slot-scope='scope'>
			  	{{scope.row.password | aa}}
			  </template>
		  </el-table-column>
		  <el-table-column label="查看收货地址" width=''>
			  <template slot-scope="scope">
			  	<el-button type="primary" round @click="getUserAddress(scope.row)">查看详情</el-button>
			  </template>
		  </el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="totalCount"
		@current-change="handleCurrentChange"
		 :current-page="currentPage"
		 class='fen'
		 >
		</el-pagination>
	</div>
</template>

<script>
	import*as api from '../api/User'
	export default{
		name:'userlist',
		data() {
			return {
				tableData: [],
				currentPage: 1,
				totalCount:50
			}
		},
		methods: {
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				api.userlists({
					page:this.currentPage
				}).then(res=>{
					this.tableData = res.data.users;
				})
			},
			getUserAddress(scope){
				api.getUserAddress(scope._id).then(res=>{
					console.log(res.data)
				})
			}
		},
		mounted(){
			api.userlists({
			}).then((res)=>{
				this.totalCount = res.data.totalCount
				this.tableData=res.data.users
			})
		},
		filters:{
			aa:function(val){
				if(val.length>10){
					return val.slice(0,15)+'...'
				}else{
					return val
				}
			}
		}
	}
</script>

<style scoped="">
	.fen{
		position: absolute;
		left: 40%;
		bottom: 10px;
	}
</style>
